<template>
  <div class="mainSon">
    <div class="main">
<!--      <div class="mainUpStyle">-->
<!--        <div class="upStyle">-->
<!--          <span class="textStyle">维修历史</span>-->
<!--        </div>-->
<!--      </div>-->
      <basic-layout title="维修历史" :showAddBtn="false">
      <!--    列表数据-->
      <van-row class="listCard">
        <van-pull-refresh
          v-if="dataList.length"
          class="cardVanPullRefresh1"
          v-model="refreshing"
          @refresh="onRefresh">
          <van-list
            v-if="dataList.length > 0"
            v-model="loading"
            :finished="finished"
            finished-text="已经到底啦!"
            @load="nextPage"
          >
            <div v-for="item in dataList" class="dataStyle">
              <!--上面数据-->
              <div class="upMainStyle">
                <!--左边文字-->
                <div class="textMainStyle">
                  <div class="jg">
                    <div class="jgson">
                      <span>维修结果</span>
                    </div>
                    <div class="jsresult">
                      <span v-if="item.WEIXJG == '00'" class="yes">维修完成</span>
                      <span v-if="item.WEIXJG == '01'" class="no">申请报废</span>
                      <span v-if="item.WEIXJG == '02'" class="no">不维修</span>
                      <span v-if="item.WEIXJG == '03'" class="no">无维修价值</span>
                    </div>
                  </div>
                  <div class="mid"></div>
                  <div class="sj">
                    <div class="sjtest">
                      <span>维修时间</span>
                    </div>
                    <div class="sjresult">
                      <span>{{ item.CHUANGJSJ }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>

        <van-pull-refresh
          v-else
          class="cardVanPullRefresh2"
          v-model="refreshing"
          @refresh="onRefresh">
          <van-empty
            class="custom-image"
            :image="require('../../../assets/images/nx/icon_common_empty.png')"
            description="暂无数据"/>
        </van-pull-refresh>
      </van-row>
      </basic-layout>
    </div>
  </div>

</template>
<script>
  import {weixHistory} from '@/api/srvAssurance/assetLabel/assetLabel';

  export default {
    name: 'inspectionRepairHistory',
    components: {},


    data() {
      return {
        visible: false,

        dataInfo: {},
        loading: false,
        finished: false,
        refreshing: false,

        queryParam: {
          type: "",
          shebid: "",
          pageIndex: 1,
          pageSize: 10,
        },
        dataList: [],
      }
    },

    created() {
      this.dataInfo = this.$route.query.dataInfo;
      this.initData();
    },

    methods: {
      onRefresh() {
        this.initData();
      },

      async initData() {
        this.queryParam.pageIndex = 1;
        this.finished = false;
        this.refreshing = true;
        await this.getDataList();
        this.refreshing = false;
      },

      // 加载下一页
      nextPage() {
        // 判断第一次查出来的数据是否还有下一页数据，如果没有则不调接口
        if (this.dataList.length < (this.queryParam.pageIndex * this.queryParam.pageSize)) {
          this.finished = true;
          return;
        }
        setTimeout(() => {
          this.queryParam.pageIndex += 1;
          this.getDataList()
        }, 1000);
      },

      async getDataList() {
        this.loading = true;
        this.queryParam.type = this.dataInfo.type;
         this.queryParam.shebid = this.dataInfo.SHEBID;
        // this.queryParam.shebid = "844E755446E94C7A986EC5EA318AEC2B";
        let res = await weixHistory(this.queryParam);
        if (res.status == 0) {
          if (this.queryParam.pageIndex == 1) {
            // 清空列表数据
            this.dataList = [];
          }
          this.dataList = this.dataList.concat(res.data);
          // 如果数据加载完毕，finished 标志位置为 true，滑到页面底部则不会再触发 nextPage() 方法了。
          if (this.dataList.length >= res.totalCount) {
            this.finished = true;
          }
        }
        this.loading = false;
      },


    }
  }
</script>

<style scoped lang="less">
  .mainSon {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 15;
    background: #fff;

    .main {
      height: 120%;

      .mainUpStyle {
        height: 55px;
        background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgb(14 150 216)), to(rgb(34, 193, 211)));

        .upStyle {
          float: left;
          width: 100%;
          height: 55px;
          display: flex;
          justify-content: center;
          align-items: center;


          .textStyle {
            color: #ffff;
            font-size: 20px;
            font-weight: 500;
          }
        }
      }


      .listCard {
        background-color: #8080803B;
        height: calc(100% - 55px);
        width: 100%;
        z-index: 999;
        overflow: auto;
        justify-content: flex-start;
        align-items: center;

        .cardVanPullRefresh1 {
          min-height: 100%;

          .dataStyle {
            height: 81px;
            margin: 15px 10px;
            background-color: #FFFFFF;
              //border-radius: 10px;

            .upMainStyle {
              padding: 10px;

              .textMainStyle {
                width: 100%;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;

                .vanHairlineTop {
                  margin: 0px 25px;
                  height: 0px;
                }
              }

              .jg {
                width: 100%;
                height: 30px;
                line-height: 30px;

                .jgson {
                  float: left;
                  font-weight: bold;
                  width: 50%
                }

                .jsresult {
                  float: right;
                  width: 50%;
                  font-weight: bold;
                  text-align: right;

                  .yes {
                    color: #07b7ee
                  }

                  .no {
                    color: red;
                  }
                }
              }

              .mid {
                height: 1px;
                background-color: grey
              }

              .sj {
                width: 100%;
                height: 30px;
                line-height: 30px;

                .sjtest {
                  float: left;
                  font-weight: bold;
                  width: 50%
                }

                .sjresult {
                  float: right;
                  width: 50%;
                  font-weight: bold;
                  text-align: right;
                }
              }

            }
          }
        }

        .cardVanPullRefresh2 {
          height: 100%;

          .custom-image {
            height: 100%;
          }
        }
      }

    }
  }


  /deep/ .van-hairline--top:after {
    border: 1px solid #00000029;
  }


</style>
